<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站手机端滚动刷新提示</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #1877F2; /* 社交主题色 */
      --success: #28a745;
      --warning: #ffc107;
      --danger: #dc3545;
      --light: #f8f9fa;
      --dark: #343a40;
      --gray: #6c757d;
      --white: #ffffff;
      --border: #eee;
      --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      overflow-x: hidden;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: var(--primary);
      color: white;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .logo {
      font-size: 20px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .nav-actions {
      display: flex;
      gap: 15px;
    }
    
    .action-btn {
      background: none;
      border: none;
      color: white;
      font-size: 20px;
      cursor: pointer;
    }
    
    /* 刷新提示容器 */
    .refresh-container {
      width: 100%;
      overflow: hidden;
    }
    
    /* 刷新提示基础样式 */
    .refresh-indicator {
      display: none;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
      transition: all 0.3s ease;
    }
    
    .refresh-indicator.active {
      display: flex;
    }
    
    .indicator-icon {
      margin-right: 8px;
      font-size: 16px;
    }
    
    .indicator-text {
      font-size: 14px;
      margin: 0;
    }
    
    /* 各种刷新状态样式 */
    .pull-to-refresh {
      background-color: var(--light);
      color: var(--gray);
    }
    
    .refreshing {
      background-color: var(--light);
      color: var(--primary);
    }
    
    .refresh-success {
      background-color: rgba(40, 167, 69, 0.1);
      color: var(--success);
    }
    
    .refresh-failed {
      background-color: rgba(220, 53, 69, 0.1);
      color: var(--danger);
    }
    
    .new-content {
      background-color: rgba(24, 119, 242, 0.1);
      color: var(--primary);
    }
    
    .loading-more {
      background-color: var(--light);
      color: var(--gray);
    }
    
    /* 内容区域 */
    .content-area {
      height: calc(100vh - 60px);
      overflow-y: auto;
      position: relative;
    }
    
    .posts-container {
      padding: 15px;
    }
    
    .post-item {
      background-color: white;
      border-radius: 12px;
      box-shadow: var(--shadow);
      padding: 15px;
      margin-bottom: 15px;
    }
    
    .post-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    
    .post-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .post-author {
      font-weight: 600;
      font-size: 15px;
    }
    
    .post-time {
      font-size: 12px;
      color: var(--gray);
    }
    
    .post-content {
      margin-bottom: 10px;
    }
    
    .post-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    
    /* 加载更多容器 */
    .load-more-container {
      padding: 15px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 控制按钮 */
    .control-buttons {
      padding: 15px;
      display: flex;
      gap: 10px;
      background-color: white;
      border-top: 1px solid var(--border);
    }
    
    .control-btn {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 8px;
      background-color: var(--primary);
      color: white;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    .control-btn.secondary {
      background-color: #f5f5f5;
      color: var(--dark);
    }
    
    /* 动画效果 */
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    
    .spinning {
      animation: spin 1.5s linear infinite;
    }
    
    .bouncing {
      animation: bounce 0.5s ease infinite;
    }
    
    /* 新内容标记 */
    .new-tag {
      display: inline-block;
      background-color: var(--primary);
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 5px;
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .indicator-text {
        font-size: 13px;
      }
      
      .post-content {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择刷新提示样式</div>
    <div class="switcher-option active" data-style="1">下拉刷新提示</div>
    <div class="switcher-option" data-style="2">刷新中状态</div>
    <div class="switcher-option" data-style="3">刷新成功提示</div>
    <div class="switcher-option" data-style="4">刷新失败提示</div>
    <div class="switcher-option" data-style="5">新内容提示</div>
    <div class="switcher-option" data-style="6">加载更多提示</div>
  </div>
  
  <div class="container">
    <!-- 顶部导航 -->
    <div class="top-nav">
      <div class="logo">
        <i class="fa fa-comments"></i>
        <span>社交圈</span>
      </div>
      <div class="nav-actions">
        <button class="action-btn">
          <i class="fa fa-pencil"></i>
        </button>
        <button class="action-btn">
          <i class="fa fa-bell-o"></i>
        </button>
      </div>
    </div>
    
    <!-- 刷新提示容器 -->
    <div class="refresh-container">
      <!-- 样式1：下拉刷新提示 -->
      <div class="refresh-indicator pull-to-refresh active" id="style1">
        <i class="fa fa-arrow-down indicator-icon bouncing"></i>
        <p class="indicator-text">下拉可以刷新</p>
      </div>
      
      <!-- 样式2：刷新中状态 -->
      <div class="refresh-indicator refreshing" id="style2">
        <i class="fa fa-circle-o-notch indicator-icon spinning"></i>
        <p class="indicator-text">正在刷新...</p>
      </div>
      
      <!-- 样式3：刷新成功提示 -->
      <div class="refresh-indicator refresh-success" id="style3">
        <i class="fa fa-check indicator-icon"></i>
        <p class="indicator-text">刷新成功，更新了3条内容</p>
      </div>
      
      <!-- 样式4：刷新失败提示 -->
      <div class="refresh-indicator refresh-failed" id="style4">
        <i class="fa fa-exclamation-triangle indicator-icon"></i>
        <p class="indicator-text">刷新失败，请重试</p>
      </div>
      
      <!-- 样式5：新内容提示 -->
      <div class="refresh-indicator new-content" id="style5">
        <i class="fa fa-bell indicator-icon"></i>
        <p class="indicator-text">有5条新动态，点击查看</p>
      </div>
      
      <!-- 样式6：加载更多提示 -->
      <div class="refresh-indicator loading-more" id="style6">
        <i class="fa fa-spinner indicator-icon spinning"></i>
        <p class="indicator-text">加载更多内容...</p>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="content-area" id="contentArea">
      <div class="posts-container" id="postsContainer">
        <div class="post-item">
          <div class="post-header">
            <img src="https://picsum.photos/id/64/100" alt="用户头像" class="post-avatar">
            <div>
              <div class="post-author">张明</div>
              <div class="post-time">10分钟前</div>
            </div>
          </div>
          <div class="post-content">
            <p>今天天气真不错，出去走走感觉整个人都精神了！#好心情</p>
            <img src="https://picsum.photos/id/1015/800/600" alt="动态图片" class="post-image">
          </div>
        </div>
        
        <div class="post-item">
          <div class="post-header">
            <img src="https://picsum.photos/id/65/100" alt="用户头像" class="post-avatar">
            <div>
              <div class="post-author">李华</div>
              <div class="post-time">30分钟前</div>
            </div>
          </div>
          <div class="post-content">
            <p>刚完成的项目终于上线了，感谢团队所有人的努力！🎉</p>
          </div>
        </div>
        
        <div class="post-item">
          <div class="post-header">
            <img src="https://picsum.photos/id/66/100" alt="用户头像" class="post-avatar">
            <div>
              <div class="post-author">王芳</div>
              <div class="post-time">1小时前</div>
            </div>
          </div>
          <div class="post-content">
            <p>分享一家超好吃的餐厅，推荐给大家！#美食推荐</p>
            <img src="https://picsum.photos/id/292/800/600" alt="动态图片" class="post-image">
          </div>
        </div>
      </div>
      
      <!-- 加载更多区域 -->
      <div class="load-more-container" id="loadMoreArea" style="display: none;">
        <button class="btn btn-light w-100" id="loadMoreBtn">
          <i class="fa fa-refresh mr-2"></i>加载更多
        </button>
      </div>
    </div>
    
    <!-- 控制按钮 -->
    <div class="control-buttons">
      <button class="control-btn" id="prevBtn">
        <i class="fa fa-chevron-left"></i> 上一个
      </button>
      <button class="control-btn" id="nextBtn">
        下一个 <i class="fa fa-chevron-right"></i>
      </button>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    let isLoading = false;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const refreshIndicators = {
      1: document.getElementById('style1'),
      2: document.getElementById('style2'),
      3: document.getElementById('style3'),
      4: document.getElementById('style4'),
      5: document.getElementById('style5'),
      6: document.getElementById('style6')
    };
    const prevButton = document.getElementById('prevBtn');
    const nextButton = document.getElementById('nextBtn');
    const contentArea = document.getElementById('contentArea');
    const postsContainer = document.getElementById('postsContainer');
    const loadMoreArea = document.getElementById('loadMoreArea');
    const loadMoreBtn = document.getElementById('loadMoreBtn');
    
    // 模拟帖子数据
    const mockPosts = [
      {
        id: 4,
        author: "赵强",
        avatar: "https://picsum.photos/id/91/100",
        time: "2小时前",
        content: "新买的相机到了，迫不及待想出去拍照了！#摄影器材",
        image: "https://picsum.photos/id/1018/800/600"
      },
      {
        id: 5,
        author: "陈静",
        avatar: "https://picsum.photos/id/62/100",
        time: "3小时前",
        content: "周末去看的展览，分享几张照片~",
        image: "https://picsum.photos/id/47/800/600"
      },
      {
        id: 6,
        author: "林小",
        avatar: "https://picsum.photos/id/63/100",
        time: "4小时前",
        content: "第一次尝试做蛋糕，看起来还不错吧？#烘焙",
        image: "https://picsum.photos/id/292/800/600"
      }
    ];
    
    // 初始化
    function init() {
      // 切换刷新样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
        });
      });
      
      // 上一个/下一个按钮
      prevButton.addEventListener('click', showPrevStyle);
      nextButton.addEventListener('click', showNextStyle);
      
      // 加载更多按钮
      loadMoreBtn.addEventListener('click', loadMoreContent);
      
      // 下拉刷新模拟
      initPullToRefresh();
      
      // 新内容提示点击事件
      refreshIndicators[5].addEventListener('click', function() {
        addNewContent();
        switchStyle(3); // 切换到刷新成功状态
        
        // 3秒后自动切换回新内容提示
        setTimeout(() => {
          switchStyle(5);
        }, 3000);
      });
    }
    
    // 初始化下拉刷新
    function initPullToRefresh() {
      let startY = 0;
      let currentY = 0;
      let isDragging = false;
      
      contentArea.addEventListener('touchstart', (e) => {
        if (contentArea.scrollTop <= 0) {
          startY = e.touches[0].clientY;
          isDragging = true;
        }
      }, false);
      
      contentArea.addEventListener('touchmove', (e) => {
        if (isDragging && contentArea.scrollTop <= 0) {
          currentY = e.touches[0].clientY;
          const diff = currentY - startY;
          
          // 仅在下拉刷新样式激活时显示拖动效果
          if (currentStyle === 1 && diff > 0) {
            e.preventDefault();
            // 限制最大下拉距离
            const pullDistance = Math.min(diff, 80);
            // 调整刷新提示的高度和文字
            refreshIndicators[1].style.height = `${pullDistance}px`;
            
            if (pullDistance > 50) {
              refreshIndicators[1].querySelector('.indicator-text').textContent = '松开刷新';
              refreshIndicators[1].querySelector('.indicator-icon').classList.replace('fa-arrow-down', 'fa-arrow-up');
            } else {
              refreshIndicators[1].querySelector('.indicator-text').textContent = '下拉可以刷新';
              refreshIndicators[1].querySelector('.indicator-icon').classList.replace('fa-arrow-up', 'fa-arrow-down');
            }
          }
        }
      }, false);
      
      contentArea.addEventListener('touchend', () => {
        if (isDragging && contentArea.scrollTop <= 0) {
          isDragging = false;
          
          if (currentStyle === 1) {
            const diff = currentY - startY;
            refreshIndicators[1].style.height = '';
            
            // 如果下拉距离足够，触发刷新
            if (diff > 50) {
              switchStyle(2); // 切换到刷新中状态
              
              // 模拟刷新过程
              setTimeout(() => {
                addNewContent();
                switchStyle(3); // 切换到刷新成功状态
                
                // 3秒后自动切换回下拉刷新状态
                setTimeout(() => {
                  switchStyle(1);
                }, 3000);
              }, 1500);
            }
          }
        }
      }, false);
    }
    
    // 切换刷新样式
    function switchStyle(style) {
      // 隐藏所有刷新提示
      Object.values(refreshIndicators).forEach(indicator => {
        indicator.classList.remove('active');
      });
      
      // 显示选中的刷新提示
      refreshIndicators[style].classList.add('active');
      
      // 特殊处理：加载更多样式时显示加载更多按钮
      if (style === 6) {
        loadMoreArea.style.display = 'block';
      } else {
        loadMoreArea.style.display = 'none';
      }
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 显示上一个样式
    function showPrevStyle() {
      let prev = currentStyle - 1;
      if (prev < 1) prev = 6;
      switchStyle(prev);
    }
    
    // 显示下一个样式
    function showNextStyle() {
      let next = currentStyle + 1;
      if (next > 6) next = 1;
      switchStyle(next);
    }
    
    // 添加新内容
    function addNewContent() {
      // 在顶部添加新内容
      mockPosts.slice(0, 2).forEach(post => {
        const postHtml = `
          <div class="post-item" style="animation: fadeIn 0.5s ease;">
            <div class="post-header">
              <img src="${post.avatar}" alt="用户头像" class="post-avatar">
              <div>
                <div class="post-author">${post.author}<span class="new-tag">新</span></div>
                <div class="post-time">刚刚</div>
              </div>
            </div>
            <div class="post-content">
              <p>${post.content}</p>
              ${post.image ? `<img src="${post.image}" alt="动态图片" class="post-image">` : ''}
            </div>
          </div>
        `;
        postsContainer.insertAdjacentHTML('afterbegin', postHtml);
      });
    }
    
    // 加载更多内容
    function loadMoreContent() {
      if (isLoading) return;
      
      isLoading = true;
      loadMoreBtn.innerHTML = '<i class="fa fa-spinner spinning mr-2"></i>加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        // 在底部添加更多内容
        mockPosts.forEach(post => {
          const postHtml = `
            <div class="post-item" style="animation: fadeIn 0.5s ease;">
              <div class="post-header">
                <img src="${post.avatar}" alt="用户头像" class="post-avatar">
                <div>
                  <div class="post-author">${post.author}</div>
                  <div class="post-time">${post.time}</div>
                </div>
              </div>
              <div class="post-content">
                <p>${post.content}</p>
                ${post.image ? `<img src="${post.image}" alt="动态图片" class="post-image">` : ''}
              </div>
            </div>
          `;
          postsContainer.insertAdjacentHTML('beforeend', postHtml);
        });
        
        isLoading = false;
        loadMoreBtn.innerHTML = '<i class="fa fa-refresh mr-2"></i>加载更多';
        
        // 显示加载成功提示
        switchStyle(3);
        
        // 2秒后切回加载更多样式
        setTimeout(() => {
          switchStyle(6);
        }, 2000);
      }, 1500);
    }
    
    // 淡入动画
    const style = document.createElement('style');
    style.textContent = `
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
    `;
    document.head.appendChild(style);
    
    // 启动
    init();
  </script>
</body>
</html>
